<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href=statics/css/bootstrap.min.css rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->


    <style type="text/css">
    	
    	/*媒体查询 注意格式 一定要有空格 否则效果不出来*/

    /*	@media screen and (max-width:1100px){
    		.mymedia{
    		display:none;
    	}

    	}*/

    	/*@media screen and (max-width:768px){
    		.mymedia{
    			color:yellow;
    		}
    	}*/

        @media screen and (min-width:768px) and (max-width:992px){
				.mymedia{
					color:green;
				}

			}
		@media screen and (max-width:768px){
			.mymedia{
				color:blue;
			}

		}
/*设置默认样式*/
		.lrow {

		background-color:#ccc;min-height:1000px;padding:0;
		}

		@media screen and (max-width:992px){
			.lrow{
				position:absolute;
				left:0;
				top:0;
				z-index:2;
				opacity:1;
				background-color:#ccc;
			}

		}
        
        .myhidden{
        	display:none;
        }
		@media screen and (min-width:992px){
			.myhidden{
				display:block;
			}
		}

		.myshow{
			display:block;
		}
		@media screen and (min-width:992px){
		.myshow{
			display:none;
		}
	}

	    .myfrom{
	    	padding:5px;
	    }
	    @media screen and (min-width:768px){
	    .myform{
			padding-left:20px;
			padding-right:20px;
			padding-top:50px;
		}
	    }

    

    </style>
  </head>
  <body>

<!--导航栏-->
	<nav class="navbar navbar-default" role="navigation" style="margin-bottom:0;">
	    <div class="container-fluid">
	    <div class="navbar-header" style="float:left">
	        <a class="navbar-brand" href="#">
	        	<button class="glyphicon glyphicon-plus" style="display:none"></button>
	        	<button class="glyphicon glyphicon-minus"></button>

	        菜鸟教程</a>
	    </div>
	  <!--   <div>
	        <ul class="nav navbar-nav">
	            <li class="active"><a href="#">iOS</a></li>
	            <li><a href="#">SVN</a></li>
	            <li class="dropdown">
	                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
	                    Java
	                    <b class="caret"></b>
	                </a>

	           

	                <ul class="dropdown-menu">
	                    <li><a href="#">jmeter</a></li>
	                    <li><a href="#">EJB</a></li>
	                    <li><a href="#">Jasper Report</a></li>
	                    <li class="divider"></li>
	                    <li><a href="#">分离的链接</a></li>
	                    <li class="divider"></li>
	                    <li><a href="#">另一个分离的链接</a></li>
	                </ul>
	            </li>
	        </ul>
	    </div> -->

	    <!--图像和徽章的设置 自己打的方法1-->

	      <!--  <a href="#">
	       	<span class="badge pull-right" style="border-radius:40px;padding:0px;background-color:red;width:20px;height:20px;line-height:20px;position:absolute;top:-1px;right:5px;">99+</span>
	       	 <img src="images/headpic.jpg" class="pull-right img-circle" style="width:45px;height:45px;"> -->
                <!--点击头像会有下拉-->
	    <!--    	      <li class="dropdown" style="position:relative;list-style:none;">
		                <a href="#" class="dropdown-toggle pull-right" data-toggle="dropdown" style="position:absolute;right:15px;top:20px;">
		                   
		                    <b class="caret"></b>
		                </a>
		                <ul class="dropdown-menu pull-right" style="background-color:pink;">
		                    <li><a href="#">未读信息</a></li>
		                    <li><a href="#">已读信息</a></li>
		                    <li><a href="#">已发送的</a></li>
		                    <li class="divider"></li>
		                    <li><a href="#">未发送的</a></li>
		                    <li class="divider"></li>
		                    <li><a href="#">已挡信息</a></li>
		                </ul>
		            </li>

	       </a> -->

         <!--图像和徽章的设置 老师的-->
         <div class="btn-group pull-right" style="position:relative;">
			  <a class="dropdown-toggle" data-toggle="dropdown">
                <img src="images/headpic.jpg" class="pull-right img-circle" style="width:45px;height:45px;">
			   	 <span class="badge pull-right" style="border-radius:40px;padding:0px;background-color:red;width:20px;height:20px;line-height:20px;position:absolute;top:0;right:0">99+</span>
			  </a>
			  
			  <ul class="dropdown-menu" role="menu">

			  	<li><a href="#" class="text-center">收到消息<span class="badge" style="background-color:red">99+</span></a></li>
			  	<li><a href="#" class="text-center">免打扰的<span class="badge" style="background-color:#ccc">99+</span></a></li>
			  	<li><a href="#" class="text-center">退出</a></li>
			   	
			  </ul>
			</div>

	      
	    </div>
	</nav>
  	<div class="container-fluid" style="position:relative;">
  		<div class="row">
  			<!--左侧菜单区-->
  			<div class="col-md-2 lrow">
  				<!--折叠-->
			<div class="panel-group" id="accordion">
				<div class="panel panel-default">
				<div class="panel-heading">
				    <h4 class="panel-title text-center">
				        <a data-toggle="collapse" data-parent="#accordion" 
				        href="#collapseOne">
				        用户管理
				        </a>
				    </h4>
				</div>
				<div id="collapseOne" class="panel-collapse collapse in">
				    <div class="panel-body">

				    <div class="btn-group">
					  i like eat and play like money however must be study-hard ...in order to my dream..
					</div>

				    </div>
				</div>
				</div>
				<div class="panel panel-default">
				<div class="panel-heading">
				    <h4 class="panel-title text-center">
				        <a data-toggle="collapse" data-parent="#accordion" 
				        href="#collapseTwo">
				        系统配置
				    </a>
				    </h4>
				</div>
				<div id="collapseTwo" class="panel-collapse collapse">
				<div class="panel-body">
				    Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
				    cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
				    vice lomo.
				</div>
				</div>
				</div>
				<div class="panel panel-default">
				<div class="panel-heading">
				    <h4 class="panel-title text-center">
				        <a data-toggle="collapse" data-parent="#accordion" 
				        href="#collapseThree">
				        数据打包
				        </a>
				    </h4>
				</div>
				<div id="collapseThree" class="panel-collapse collapse">
				    <div class="panel-body">
				        Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
				        cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
				        vice lomo.
				    </div>
				</div>
				</div>
				</div>

  			</div>
  			<!--右侧内容区-->
  			<div class="col-md-10">
  				<ul class="breadcrumb" style="margin-left:-20px;margin-right:-20px;background-color:orange">
				    <li><a href="#">控制台</a></li>
				    <li class="active">分布式表单</li>   
				</ul>
			<!-- 进度条 -->
               <div class="progress">
				    <div class="progress-bar" role="progressbar" aria-valuenow="60" 
				        aria-valuemin="0" aria-valuemax="100" style="width:25%;">
				        <span class="sr-only">25% 完成</span>
				    </div>
			<!-- 表单 -->
				</div>
				<div class="row myform">
					<form role="form">
						<!--第一个-->
					<div class="form-item">
						<h1>1</h1>
					  <div class="form-group">
					    <label for="name">用户名</label>
					    <input type="text" class="form-control" id="name" placeholder="请输入名称">
					  </div>

					   <div class="form-group">
					    <label for="name">名称</label>
					    <input type="text" class="form-control" id="name" placeholder="请输入名称">
					  </div>

					   <div class="form-group">
					    <label for="name">密码</label>
					    <input type="text" class="form-control" id="name" placeholder="请输入名称">
					  </div>
					  
					  <div class="checkbox">
					    <label>
					      <input type="checkbox">请打勾
					    </label>
						</div>
					</div>
                         <!--第二个-->
				    <div class="form-item" style="display:none">
				    	<h1>2</h1>
					  <div class="form-group">
					    <label for="name">用户名</label>
					    <input type="text" class="form-control" id="name" placeholder="请输入名称">
					  </div>

					   <div class="form-group">
					    <label for="name">名称</label>
					    <input type="text" class="form-control" id="name" placeholder="请输入名称">
					  </div>

					   <div class="form-group">
					    <label for="name">密码</label>
					    <input type="text" class="form-control" id="name" placeholder="请输入名称">
					  </div>
					  
					  <div class="checkbox">
					    <label>
					      <input type="checkbox">请打勾
					    </label>
					</div>
					  </div>
                         <!--第三个-->
				    <div class="form-item" style="display:none">
				    	<h1>3</h1>
					  <div class="form-group">
					    <label for="name">用户名</label>
					    <input type="text" class="form-control" id="name" placeholder="请输入名称">
					  </div>

					   <div class="form-group">
					    <label for="name">名称</label>
					    <input type="text" class="form-control" id="name" placeholder="请输入名称">
					  </div>

					   <div class="form-group">
					    <label for="name">密码</label>
					    <input type="text" class="form-control" id="name" placeholder="请输入名称">
					  </div>
					  
					  <div class="checkbox">
					    <label>
					      <input type="checkbox">请打勾
					    </label>
					</div>
					  </div>
                           <!--第四个-->
					<div class="form-item" style="display:none;">
						<h1>4</h1>
					  <div class="form-group">
					    <label for="name">用户名</label>
					    <input type="text" class="form-control" id="name" placeholder="请输入名称">
					  </div>

					   <div class="form-group">
					    <label for="name">名称</label>
					    <input type="text" class="form-control" id="name" placeholder="请输入名称">
					  </div>

					   <div class="form-group">
					    <label for="name">密码</label>
					    <input type="text" class="form-control" id="name" placeholder="请输入名称">
					  </div>
					  
					  <div class="checkbox">
					    <label>
					      <input type="checkbox">请打勾
					    </label>
					</div>
				</form>
			</div>
			<!--  按钮 -->
					<div class="row">
					 	<div class="col-md-6 col-sm-6">
					 		<button class="btn btn-primary btn-block">上一步</button>
					 	</div>
					 	
					 	<div class="col-md-6 col-sm-6">
					 	<button class="btn btn-primary btn-block next">下一步</button>
					 	</div>
					 	<div class="col-md-6 col-sm-6">
					 	<button class="btn btn-primary btn-block done" data-toggle="modal" data-target="#myModal" style="display:none">提交</button>
					 	</div>

					 	
					 	
					 
			<!--模态框（Medel)-->
			<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				    <div class="modal-dialog">
				        <div class="modal-content">
				            <div class="modal-header">
				                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				                <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
				            </div>
				            <div class="modal-body">在这里添加一些文本</div>
				            <div class="modal-footer">
				                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				                <button type="button" class="btn btn-primary">提交更改</button>
				            </div>
				        </div><!-- /.modal-content -->
				    </div><!-- /.modal -->
				</div> 
					

					
				</div>


  			<!-- 	<h1>文字</h1>
  				<p class="mymedia">我要吃螃蟹奶油蛋糕河虾龙虾串串火锅海底捞牛排泡芙薯片酸奶水果我要要长高骑行要四级过看书等我要吃螃蟹奶油蛋糕河虾龙虾串串火锅海底捞牛排泡芙薯片酸奶水果我要要长高骑行要四级过看书等
  					我要吃螃蟹奶油蛋糕河虾龙虾串串火锅海底捞牛排泡芙薯片酸奶水果我要要长高骑行要四级过看书等我要吃螃蟹奶油蛋糕河虾龙虾串串火锅海底捞牛排泡芙薯片酸奶水果我要要长高骑行要四级过看书等
  					我要吃螃蟹奶油蛋糕河虾龙虾串串火锅海底捞牛排泡芙薯片酸奶水果我要要长高骑行要四级过看书等我要吃螃蟹奶油蛋糕河虾龙虾串串火锅海底捞牛排泡芙薯片酸奶水果我要要长高骑行要四级过看书等
  					我要吃螃蟹奶油蛋糕河虾龙虾串串火锅海底捞牛排泡芙薯片酸奶水果我要要长高骑行要四级过看书等我要吃螃蟹奶油蛋糕河虾龙虾串串火锅海底捞牛排泡芙薯片酸奶水果我要要长高骑行要四级过看书等
  					我要吃螃蟹奶油蛋糕河虾龙虾串串火锅海底捞牛排泡芙薯片酸奶水果我要要长高骑行要四级过看书等我要吃螃蟹奶油蛋糕河虾龙虾串串火锅海底捞牛排泡芙薯片酸奶水果我要要长高骑行要四级过看书等
  					我要吃螃蟹奶油蛋糕河虾龙虾串串火锅海底捞牛排泡芙薯片酸奶水果我要要长高骑行要四级过看书等我要吃螃蟹奶油蛋糕河虾龙虾串串火锅海底捞牛排泡芙薯片酸奶水果我要要长高骑行要四级过看书等
  				</p> -->
  				<!--垂直表单-->
  			<!-- 	<form role="form">
				  <div class="form-group">
				    <label for="name">名称</label>
				    <input type="text" class="form-control" id="name" placeholder="请输入名称">
				  </div>
				  <div class="form-group">
				    <label for="inputfile">文件输入</label>
				    <input type="file" id="inputfile">
				    <p class="help-block">这里是块级帮助文本的实例。</p>
				  </div>
				  <div class="checkbox">
				    <label>
				      <input type="checkbox">请打勾
				    </label>
				  </div>
				  <button type="submit" class="btn btn-default">提交</button>
				</form> -->


       
			
	  		
	  			</div>
	  		</div>
  		


  	</div>










    <!-- <h1>你好，世界！</h1> -->
   <!--  <h1 style="text-align:center;color:green;font-family:bold;font-size:48px;">BUNOOB.COM</h1> -->

 <!--    <button class="btn btn-primary">A</button> -->

<!--  <div class="container-fluid">
 	
 	<div class="row" style="background-color:green;min-height:50px;">
 		<div class="col-md-12"></div>	
 	</div>

 	<div class="row" style="background-color:#ccc;min-height:50px;">
 		<div class="col-md-2" style="background-color:#ccc;min-height:50px;"></div>
 		<div class="col-md-8" style="background-color:#fff;min-height:50px;"></div>
 		<div class="col-md-2" style="background-color:#ccc;min-height:50px;"></div>
 	</div>

 		<div class="row" style="background-color:#ccc;min-height:50px;">
 		<div class="col-md-2" style="background-color:pink;min-height:50px;"></div>
 		<div class="col-md-8" style="background-color:#ccc;min-height:50px;"></div>
 		<div class="col-md-2" style="background-color:#blue;min-height:50px;"></div>
 	</div>

 </div> -->

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="statics/js/jquery.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="statics/js/bootstrap.min.js"></script>

    <script type="text/javascript">
   
   /*方法一 用toggle方法来设置显示和隐藏*/

    /*$(document).ready(function(){

     $("button").click(function(){

    $("button").toggle();

  });

});*/

  
  /*方法二*/
  /*$('.glyphicon-plus').click(function(){
  	$(this).toggle();
  	$('.glyphicon-minus').toggle();
  });

  $('.glyphicon-minus').click(function(){
  	$(this).toggle();
  	$('.glyphicon-plus').toggle();
  
  });*/


  /*方法三*/
   /*($('.glyphicon-plus').click(function(){
  	$(this).hide();
  	$('.glyphicon-minus').show();
  });

  $('.glyphicon-minus').click(function(){
  	$(this).hide();
  	$('.glyphicon-plus').show();
  
  });*/



$('.glyphicon').click(function(){
	$('.glyphicon').toggle();
	$('.lrow').toggleClass('myhidden');
	$('.lrow').toggleClass('myshow');

});

	function showdone(){
		alert('已完成');
	}


// /*切换下一步的操作 */
$('.next').click(function(){
	$('.form-item').each(function(){
		var display=$(this).css('display');

		if(display=='block'){
			var n=$(this).index()+1;

			var p =(n+1)/4*100+'%';
			console.log(n);
			$('.progress-bar').css('width',p);
			$('.progress-info').text(p +'已完成');
			if(n<4){
				$('.form-item').hide();
				$('.form-item:eq('+n+')').show();
			

			if(n==3){
				$('.next').hide();
				$('.done').show();
                
			}
			return false;
		}
	}

	})
})

/*方法二*/
// $('.next').click(function(){
// 	var p=[];
// 	p[0]=$('.form-item:eq(0)').css('display');
// 	p[1]=$('.form-item:eq(0)').css('display');
// 	p[2]=$('.form-item:eq(0)').css('display');
// 	p[3]=$('.form-item:eq(0)').css('display');

// 	for(var i=0;i<p.length;i++){
// 		if(p[i]=='block'){
// 			var n =i+1;
// 			$('.form-item').hide();
// 			$('.form-item:eq('+n+')').show();
// 		}
// 	}

// })

    </script>
  </body>
</html>